<template>
    <div id="myChartChina" :style="{ width: '80%', height: '80%' }" />
</template>



<script>
export default {
    props: {},
    data() {
        return {
            data: [],
        };
    },
    mounted() {
        this.design_map()
    },

    methods: {
        design_map() {
            this.axios.get('/api/design/map').then((res) => {
                console.log(res)
                // 判断返回信息状态
                if (res.data.code == 200) {
                    if (res.data.list) {
                        this.data = res.data.list
                        this.drawLine();
                    }

                } else {
                    this.$Message(res.data.msg)
                }
            })
        },
        drawLine() {
            var myChartContainer = document.getElementById("myChartChina"); //绑定div容器

            var resizeMyChartContainer = function() {
                myChartContainer.style.width = 100 + "%";

                myChartContainer.style.height = window.innerHeight * 0.7 + "px";
            };

            resizeMyChartContainer();

            var myChartChina = this.$echarts.init(myChartContainer);

            function randomData() {
                return Math.round(Math.random() * 500);
            } // 绘制图表

            var optionMap = {
                tooltip: {
                    trigger: "item",
                }, //左侧小导航图标

                visualMap: {
                    show: false,

                    x: "left",

                    y: "center", //改变地图区域颜色

                    splitList: [
                        { start: 950, end: 1000 },

                        { start: 900, end: 950 },

                        { start: 850, end: 900 },

                        { start: 800, end: 850 },

                        { start: 750, end: 800 },

                        { start: 700, end: 750 },

                        { start: 650, end: 700 },

                        { start: 600, end: 650 },

                        { start: 550, end: 600 },

                        { start: 500, end: 550 },

                        { start: 450, end: 500 },

                        { start: 400, end: 450 },

                        { start: 350, end: 400 },

                        { start: 300, end: 350 },

                        { start: 250, end: 300 },

                        { start: 200, end: 250 },

                        { start: 150, end: 200 },

                        { start: 100, end: 150 },

                        { start: 50, end: 100 },

                        { start: 0, end: 50 },
                    ],

                    color: [
                        "#FF1111", //9

                        "#EF2121", //8

                        "#EF2173", //17

                        "#878090", //16

                        "#F8F819", //15

                        "#DF3177", //4

                        "#C09450", //13

                        "#19F8F8", //12

                        "#5B5BFA", //11

                        "#A84EE4", //10

                        "#E44E8A", //9

                        "#FBAE7C", //8

                        "#FAFA6B", //7

                        "#A4F031", //6

                        "#A7E3F1", //5

                        "#92E4B3", //4

                        "#A8DFDF", //3

                        "#A399CC", //2

                        "#CC99CC", //1
                    ],
                }, //配置属性

                series: [{
                    name: "数据",

                    type: "map",

                    mapType: "china",

                    roam: false,

                    label: {
                        normal: {
                            show: false, //省份名称
                        },

                        emphasis: {
                            show: true,
                        },
                    },

                    data: this.data, //数据
                }, ],
            };

            myChartChina.setOption(optionMap);

            window.onresize = function() {
                resizeMyChartContainer();

                myChartChina.resize();
            };
        },
    },
};
</script>


<style scoped>
#myChartChina {
    width: 70%;
    height: 400px;
}
</style>
